<!-- column 3 (sidebar) -->
<div class="<?= ($activeGallery != 1) ? 'col-md-12' : 'col-sm-5' ?> sidebar-offcanvas enter-left-bounce" id="sidebar">
  <!-- <h1 class="title"><?php // $titleArticle ?></h1>
  <h3 class="title"><?php // $titleArticle2 ?></h3>
  <h3 class="title"><?php // $titleArticle3 ?></h3> -->
  <div class="info">
    <?php 
      echo $contentArticle;
      if(count($subArticle) > 0){
        echo '<ul>';
        foreach ($subArticle as $valueSub) {
          echo '<li><a href="javascript:void(0)" ids="'.$valueSub['gallery_id'].'" class="changeGallery">'.$valueSub['title'].'</a></li>';
        }
        echo '</ul>';
      }
    ?>
  </div>
</div><!-- /column 3 (sidebar) -->
<?php
if($activeGallery == 1){
?>
<div class="col-xs-12 col-sm-7" id="slideshow">
  <!-- main slider carousel -->
  <div class="row" id="carouselCustom">
    <div class="col-md-12" id="carousel-bounding-box">
      <div id="myCarousel" class="carousel slide">
        <!-- main slider carousel items -->
        <div class="carousel-inner">
          <?php
          $i=0;
          foreach ($imagesPage as $value) {
            if($i == 0){
              echo '<div class="item active" data-slide-number="'.$i.'">';
                echo '<img src="'.base_url().$value['images'].'" class="img-responsive" width="1200" height="480">';
              echo '</div>';
            }else{
              echo '<div class="item" data-slide-number="'.$i.'">';
                echo '<img src="'.base_url().$value['images'].'" class="img-responsive" width="1200" height="480">';
              echo '</div>';
            }
            $i++;
          }
          ?>
        </div>
        <!-- main slider carousel nav controls --> 
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <?php
          $i=0;
          foreach ($imagesPage as $value) {
            if($i == 0){
              echo '<li data-target="#myCarousel" data-slide-to="'.$i.'" class="active"></li>';
            }else{
              echo '<li data-target="#myCarousel" data-slide-to="'.$i.'"></li>';
            }
            $i++;
          }
          ?>
        </ol>
      </div>
    </div>
    <!-- thumb navigation carousel -->
    <div id="slider-thumbs">
      <?php
        $i=0;
        foreach ($imagesPage as $value) {
          echo '<div class="col-xs-6 col-md-3 col-sm-4">
            <div class="dummy"></div>
            <div class="in">
              <a href="#" class="thumbnail" id="carousel-selector-'.$i.'">
                <img src="'.base_url().$value['thump'].'" alt="" class="img-responsive">
              </a>
            </div>
          </div>';
          $i++;
        }
      ?>
    </div>
  </div>
  <!--/main slider carousel-->
</div>
<?php
}
?>